$(document).ready(function() {
	$( "#dialogoNuevo" ).dialog({
		autoOpen: false,
		height: 300,
		width: 400,
		modal: true,
		buttons: {
			"Aceptar": function() {
				PostJSON({
					'function_to_call': "crearZona",
			        'descripcion': $('#descripcionZonaNueva').val()
			        },
			        function(msg) {
			        	
			        	$( "#dialogoNuevo" ).dialog( "close" );
			        	alert(msg);
			        	
				    });
			},
			"Cancelar": function() {
				$( this ).dialog( "close" );
			}
		},
		close: function() {
			
		}
	});
	
	$( "#dialogoModificar" ).dialog({
		autoOpen: false,
		height: 300,
		width: 400,
		modal: true,
		buttons: {
			"Aceptar": function() {
				PostJSON({
					'function_to_call': "modificarZona",
			        'descripcion': $('#descripcionZonaModificar').val(),
			        'id': $('#idZonaModificar').val()
			        },
			        function(msg) {
			        	
			        	$( "#dialogoModificar" ).dialog( "close" );
			        	alert(msg);
			        	buscarZona();
			        	
				    });
			},
			"Cancelar": function() {
				$( this ).dialog( "close" );
			}
		},
		close: function() {
			
		}
	});
});

$(function(){
	$('#nuevaZona').click(function(){
			$( "#dialogoNuevo" ).dialog('open');
	});
});	

$(function(){
	$('#buscarZona').click(
		function(){
			buscarZona();
		}
	);
});	

function buscarZona(){
	PostJSON({
		'function_to_call': "buscarZona",
        'descripcion': $('#descripcionZona').val()
        },
        function(zonas) {
        	 $('#resultadoBusqueda').empty();
        	 var tabla ='<table id="tablaZonas"><thead><th></th><th>ID</th><th>Descripcion</th></tr></thead><tbody>'; 
        	 
        	 for (var i = 0; i < zonas.length; i++) { 
                 tabla+='<tr><td><input type="radio" name="radio" value="'+ zonas[i].id+'"/></td><td>' + zonas[i].id + '</td><td>' + zonas[i].descripcion + '</td></tr>'; 
               }
        	 tabla += '</tbody></table>';
        	 $('#resultadoBusqueda').append(tabla);
        	 $('#resultadoBusqueda').append("<div style='margin-left:40%;'><span id='modificarZona'>Modificar</span>&nbsp;&nbsp;<span id='eliminarZona'>Eliminar</span></div>")
        	 $('#tablaZonas').dataTable({
                "bSortClasses": false,
                "bLengthChange": false,
                "bPaginate": true,
        		"bJQueryUI": true,
        	    "sPaginationType": "full_numbers",
		        "bFilter": true,
		        "bSort": true,
		        "bInfo": false,
		        "bAutoWidth": false,
		        "aoColumns": [
		             			{ sWidth: "10%" },
		             			{ sWidth: "30%" },
		             			{ sWidth: "70%" }
		             		]
        	 }
        			 
        	 );
        	 $('#eliminarZona').click(
        				function(){
        					eliminarZona();
        				}
        			);
        	 $('#modificarZona').click(
        			 function(){
        				 var idZona = $('input[type=radio]:checked').val();
        				 PostJSON({
        						'function_to_call': "buscarZonaPorId",
        				        'id': idZona
        				        },
        				        function(zonas) {
        				        	$('#descripcionZonaModificar').val(zonas[0].descripcion);
        				        	$('#idZonaModificar').val(zonas[0].id);
        				        	$( "#dialogoModificar" ).dialog('open');
        				        }
        				 );
        			 });
        			 
	    });
}

function eliminarZona(){
	PostJSON({
		'function_to_call': "eliminarZona",
        'idZona': $('input[type=radio]:checked').val()
        },
        function(msg) {
        	alert(msg);
        	buscarZona();
        });
}